<template>
    <div id="classM">
      <!--<div v-if="showUpload" class="showUpload">
            <div class="showUploadCt">
            <button @click="upload">上传</button>
            </div>
      </div>-->
      <el-dialog title="您是否上传吗" width="300px"  :visible.sync="confirmExcel">
        <span style="padding-left:20px;">文件名：</span><span>班级成员.xlsx</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="confirmExcel = false" style="padding:6px">取 消</el-button>
          <el-button style="padding:6px" type="primary" @click="confirm">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="您确认清空吗" width="300px"  :visible.sync="confirmDrop">
        <span style="padding-left:20px;">该操作将<span style="color:red">清除</span>本班级所有的成员，请确认</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="confirmDrop = false" style="padding:6px">取 消</el-button>
          <el-button style="padding:6px" type="primary" @click="confirmD">确 定</el-button>
        </span>
      </el-dialog>
      <div style="position:relative">
        <el-autocomplete
                  v-model="state4"
                  :fetch-suggestions="querySearchAsync"
                  placeholder="搜索框"
                  @select="handleSelect">
                  <i
                    class="el-icon-search el-input__icon"
                    slot="suffix"
                  >
                  </i>
      </el-autocomplete>
      <div ref="addC"  style="cursor:pointer;opacity:1.0;padding:0;height:25px;border-bottom:1px solid #eee;transition:all 0.6s ease;width:80px;position:absolute;bottom:20%;left:230px;z-index:100;overflow:hidden">
        <div style="font-weight:bold;cursor:point;opacity:1.0;z-index:100;background:#eee;right:15px;position:absolute;" ref="addTittle" @click="addC">
            {{addTittle}}
        </div>
        <img style="height:18px;width:7px;position:absolute;top:2px;right:3px;z-index:1000" :src="addSrc">
        <div class="addC" ref="op" style="opacity:1.0;transition:all 0.2;display:none">
            <div v-if="selected==='工号'" ref="num"  style="position:absolute;bottom:0px;left:0px;width:700px" key="num">
              <span>班级编号</span><input style="margin-right:5px;padding:5px;font-size:14px;width:50px;background:white;border:none;outline:none;box-shadow:  inset -1px -1px 5px  rgba(0,0,0,0.1);" v-model="classNum" class="numInput" placeholder="">
              <span>班级名称</span><input style="margin-right:5px;padding:5px;font-size:14px;width:90px;background:white;border:none;outline:none;box-shadow:  inset -1px -1px 5px  rgba(0,0,0,0.1);"  class="numInput" placeholder="">
              <span>所属院系</span><input style="margin-right:5px;padding:5px;font-size:14px;width:50px;background:white;border:none;outline:none;box-shadow:  inset -1px -1px 5px  rgba(0,0,0,0.1);"  class="numInput" placeholder="">
              <span>任课老师</span><input style="padding:5px;font-size:14px;width:50px;background:white;border:none;outline:none;box-shadow:  inset -1px -1px 5px  rgba(0,0,0,0.1);"  class="numInput" placeholder="  ">
              <span style="margin:0;padding:0.7% 0.4% 0.7% 2%;font-weight:bold;cursor:pointer" type="primary">确定</span>
            </div>
        </div>
      </div>
      </div>
      <el-dialog
          title="编辑用户信息"
          :visible.sync="editDialog0"
          width="60%"
          :before-close="handleClose">
          <div style="padding-left:1.5vw">
                <div style="color:#303133;float:left;border-bottom:1px solid #ccc;;width:16%;margin-right:01vw;padding-left:0.8vw">
                姓名
                <input style=" padding-left:0.2vw;color:gray;font-size:1.3vw;width:60%;background:white;border:none;outline:none;"  placeholder="改为听">
              </div>
              <div style="color:#303133;padding-left:0.8vw;margin-right:01vw;float:left;border-bottom:1px solid #ccc;width:20%">
                学号
                <input style="padding-left:0.2vw;color:gray;font-size:1.3vw;width:65%;background:white;border:none;outline:none;"  placeholder="改为听">
              </div>
              <div style="color:#303133;padding-left:0.8vw;margin-right:01vw;float:left;border-bottom:1px solid #ccc;width:28%">
                班级
                <input style="padding-left:0.2vw;color:gray;font-size:1.3vw;width:70%;background:white;border:none;outline:none;"  placeholder="改为听">
              </div>
              <div style="color:#303133;padding-left:0.8vw;float:left;border-bottom:1px solid #ccc;width:22%">
                电话
                <input style="padding-left:0.2vw;color:gray;font-size:1.3vw;width:65%;background:white;border:none;outline:none;"  placeholder="改为听">
              </div>
          </div>
          <span slot="footer" class="dialog-footer">
          </span>
        </el-dialog>
        <transition name="fade">
        <div class="showClassMembersBG" v-if="showM">
        </div>
        </transition>
        <transition name="fade">
        <div class="showClassMembers" v-if="showM">
          <div style="padding:8px 0 8px 15px; ">
            <span style="font-size:20px">班级成员</span>
            <span style="font-size:10px;padding-left:1px;color:gray">ol-系媒体实务</span>
            <img style="cursor:pointer;height:16px;width:16px;top:15px;right:15px;position:absolute" @click="showM=false" src="/src/assets/closeDark.png">
          </div>
          <div style="background:white;padding-top:8px;height:83%;">
            <div style="text-align:center;padding: 5px 0 5px 0;color:#929292;curcor:pointer;position:relative" @click="addMember=false">
              <div style="font-size:15px;text-align:left;padding: 0 0 5px 35px" >
                <input style="margin-right:10px;width:50px;border:none;background:white;outline:none;padding:5px;border-bottom:1px solid #ccc" placeholder="姓名">
                <input style="margin-right:15px;width:80px;border:none;background:white;outline:none;padding:5px;border-bottom:1px solid #ccc" placeholder="学号">
                <input style="margin-right:12px;width:45px;border:none;background:white;outline:none;padding:5px;border-bottom:1px solid #ccc" placeholder="院系">
                <input style="margin-right:15px;width:90px;border:none;background:white;outline:none;padding:5px;border-bottom:1px solid #ccc" placeholder="电话">
                <span style="font-size:15px;font-weight:bolder;cursor:pointer">添加</span>
              </div>
            </div>
            <ul style="overflow-y:scroll;height:90%">
              <li style="display:inline-block;vertical-align:middle;color:gray;font-size:15px;" v-for="(member,index) in members">
                <img style="height:20px;width:20px;padding:0 0 0 15px">
                <span style="padding-right:20px">{{member.name}}</span>
                <span style="padding-right:20px">{{member.num}}</span>
                <span style="padding-right:20px">{{member.dep}}</span>
                <span style="padding-right:20px">{{member.tell}}</span>
                <img style="height:16px;width:16px;cursor:pointer" src="/src/assets/redSmall.png">
              </li>
            </ul>
          </div>
          <div style="text-align:center">
            <el-tooltip content="清空成员" placement="bottom" >
              <img @click="confirmDrop = true"  src="/src/assets/shanchu.png" style="height:20px;width:20px;margin:8px 10px 0px 0px;cursor:pointer">
            </el-tooltip>
            <input  type="file" style="margin-top:8px;height:20px;width:20px;cursor:pointer;position:absolute;opacity:0.0" @change="confirmExcel = true">
            <el-tooltip content="导入Excel" placement="bottom" effect="light">
              <img  src="/src/assets/daoru.png" style="height:20px;width:20px;cursor:pointer">
            </el-tooltip>
          </div>
        </div>
        </transition>
        <el-table
          border="true"
          align="left"
          :data="teacherData"
          style="width: 98%;height:30vw"
          :default-sort = "{prop: 'date', order: 'descending'}"
        >
          <el-table-column
          
            prop="_classNum"
            label="班级编号"
            sortable
            >
          </el-table-column>
          <el-table-column
            prop="_className"
            label="班级名称"
            sortable
           >
          </el-table-column>
          <el-table-column
            prop="_dep"
            label="所属院系"
            :formatter="formatter">
          </el-table-column>
          <el-table-column
            prop="_teacher"
            label="任课老师"
            sortable
          >
          </el-table-column>
          <el-table-column
          prop="_acount"
          label="班级人数"
          sortable
         >
          </el-table-column>
          <el-table-column
          label="操作"
          >
          <template slot-scope="scope" >
          <el-button type="text" size="small" @click="editDialog = true">编辑</el-button>
            <el-button type="text" size="small"  @click="showM=true">详情</el-button>
            <el-button
              fixed="right"
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
              移除
            </el-button>
          </template>
          </el-table-column>
        </el-table>
        <el-dialog title="班级信息" :visible.sync="editDialog" style="margin-top:100px;" width="550px">
          <div style="text-align:center;height:50px;padding-bottom:15px;height:100%">
            <span>OJBK-</span>
            <span>新媒体实务-</span>
            <span>游戏系-</span>
            <span>黄宋杰</span>
          </div>
          <div style="text-align:center;height:50px;">
              <input style="margin-right:10px;width:80px;border:none;background:white;outline:none;padding:5px;border-bottom:1px solid #ccc" placeholder="班级编号">
              <input style="margin-right:10px;width:80px;border:none;background:white;outline:none;padding:5px;border-bottom:1px solid #ccc" placeholder="班级名称">
              <input style="margin-right:10px;width:80px;border:none;background:white;outline:none;padding:5px;border-bottom:1px solid #ccc" placeholder="所属院系">
              <input style="margin-right:10px;width:80px;border:none;background:white;outline:none;padding:5px;border-bottom:1px solid #ccc" placeholder="任课老师">
              <span style="cursor:pointer;padding:6px;font-size:16px;font-weight:bold" type="primary" @click="goEdit">确 定</span>
              <!--<span  @click="editDialog = false" style="padding:0px;font-size:16px;">取 消</span>-->
          </div>
        </el-dialog>
    </div>
</template>
<style >
 #classM .el-dialog__title{
   font-size: 16px;
 }
  .el-dialog{
    z-index: 231312;
  }
  .v-modal{
    /* display: none;*/
    }
    input[type="file"] {
    color: transparent;
  }
    .fade-enter-active, .fade-leave-active {
    transition: opacity .3s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
    ul {
      list-style: none;
      padding: 0;margin: 0
    }
    li{
      padding: 0;margin: 0;
    }
    #classM .showClassMembersBG{
      position: fixed;
      top:0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      height:100%;
      width: 100%;
      z-index: 100;
      padding: 0;
      margin: 0;
    }
    #classM .showClassMembers{
      top:10%;
      background:#d8d8d8;
      position: fixed;
      height:500px;
      width: 460px;
      z-index: 1001;
      padding: 0;
      margin-left: 50%;
      border-radius: 5px;
      left:-250px;
    }
    th{
      color:#303133;
    }
    .el-table thead{
      color:#303133;
    }
    .el-input{
      width: 100%;
      border:none;
    }
    .el-table .el-input__inner{
      background: rgba(255, 255, 255, 0);
      border-color:rgba(255, 255, 255, 0);
    }
    .el-table .cell{
      text-align: center;
    }
    .showUp-enter-active {
    transition: all .3s ease;
    }
    .showUp-leave-active {
      transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .showUp-enter, .showUp-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
      transform: translateY(20px);
      opacity: 0;
    }
    #classM{
      position: relative;
      }
      .el-table thead{
        color: white
      }
    #classM .el-dialog__body{
        padding: 0 0 0 0;
      }
      .el-table__body{
        overflow-y:scroll;
      }
      #classM .el-dialog__footer{
        padding:15px;
      }
      #classM .el-dialog__header{
        padding-bottom: 0px
      }
</style>
<script>
 import axios from 'axios'
    export default{
        data(){
            return{
              confirmDrop:false,
              confirmExcel:false,
              addMember:true,
              showM:false,
              addTittle:'创建班级',
              addSrc:'/src/assets/closeL.png',
              selected:"工号",
              showUpload:"true",
              editDialog:false,
              members:[
                {
                  name:"黄宋杰",
                  dep:'游戏系',
                  num:"1440624150",
                  tell:"18202002066",
                },
                {
                  name:"黄宋杰",
                  dep:'游戏系',
                  num:"1440624150",
                  tell:"18202002066",
                },
                {
                  name:"黄宋杰",
                  dep:'游戏系',
                  num:"1440624150",
                  tell:"18202002066",
                },
                {
                  name:"黄宋杰",
                  dep:'游戏系',
                  num:"1440624150",
                  tell:"18202002066",
                },
                {
                  name:"黄宋杰",
                  dep:'游戏系',
                  num:"1440624150",
                  tell:"18202002066",
                },
                {
                  name:"黄宋杰",
                  dep:'游戏系',
                  num:"1440624150",
                  tell:"18202002066",
                },
                {
                  name:"黄宋杰",
                  dep:'游戏系',
                  num:"1440624150",
                  tell:"18202002066",
                },
                {
                  name:"黄宋杰",
                  dep:'游戏系',
                  num:"1440624150",
                  tell:"18202002066",
                },
                {
                  name:"黄宋杰",
                  dep:'游戏系',
                  num:"1440624150",
                  tell:"18202002066",
                },
                {
                  name:"黄宋杰",
                  dep:'游戏系',
                  num:"1440624150",
                  tell:"18202002066",
                },
                {
                  name:"黄宋杰",
                  dep:'游戏系',
                  num:"1440624150",
                  tell:"18202002066",
                },
                {
                  name:"黄宋杰",
                  dep:'游戏系',
                  num:"1440624150",
                  tell:"18202002066",
                },
              ],
                teacherData:[
                  {
                  _classNum: 'OJBK',
                  _className: '新媒体实务',
                  _dep: '游戏系',
                  _teacher:'孟辉',
                  _acount:"56",
                },
                {
                  _classNum: 'OJBK',
                  _className: '新媒体实务',
                  _dep: '游戏系',
                  _teacher:'xxx',
                  _acount:"666",
                },
                {
                  _classNum: 'OJBK',
                  _className: '新媒体实务',
                  _dep: '游戏系',
                  _teacher:'xxx',
                  _acount:"666",
                },
                {
                  _classNum: 'OJBK',
                  _className: '新媒体实务',
                  _dep: '游戏系',
                  _teacher:'xxx',
                  _acount:"666",
                },
                {
                  _classNum: 'OJBK',
                  _className: '新媒体实务',
                  _dep: '游戏系',
                  _teacher:'xxx',
                  _acount:"666",
                },
                {
                  _classNum: 'OJBK',
                  _className: '新媒体实务',
                  _dep: '游戏系',
                  _teacher:'xxx',
                  _acount:"666",
                },
                {
                  _classNum: 'OJBK',
                  _className: '新媒体实务',
                  _dep: '游戏系',
                  _teacher:'xxx',
                  _acount:"666",
                },
                {
                  _classNum: 'OJBK',
                  _className: '新媒体实务',
                  _dep: '游戏系',
                  _teacher:'xxx',
                  _acount:"666",
                } 
                ],
            }
        },
      mounted:function(){
        var _this = this;
        axios.post('/course/getAllCourse').then(function (res) {
          console.log("班级信息",res.data.allCourse);
        }).catch(function (err) {
            /*console.log(err);*/
        });
      },
      methods: {
        confirm(){
          this.confirmExcel=false;
          this.$message('上传成功');
        },
        confirmD(){
          this.confirmDrop=false;
          this.$message('上传成功');
        },
        addC(){
            switch (this.$refs.addC.style.width){
                    case "80px":
                    console.log(this.$refs.addC.style.opacity)
                    this.$refs.op.style.display="block";
                    this.$refs.op.style.opacity="1.0";
                    this.$refs.addC.style.width="630px";
                    this.$refs.addC.style.borderBottom="1px solid gray";
                    this.$refs.addTittle.style.opacity="0.0"
                    this.$refs.addTittle.style.right="0px"
                    this.addTittle="..."
                    this.addSrc="/src/assets/closeR.png"
                   /* this.$refs.addC.style.opacity="1.0";*/
                    console.log(this.$refs.addC.style.opacity)
                    break;
                    case "630px":
                    this.$refs.op.style.opacity="0.0";
                    this.$refs.addC.style.width="80px";
                    this.$refs.addTittle.style.opacity="1.0"
                    this.$refs.addTittle.style.right="15px"
                    this.addTittle="创建班级"
                    this.addSrc="/src/assets/closeL.png"
                    this.$refs.addC.style.borderBottom="1px solid #eee";
                }
          },
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
        goEdit(index){
          /*this.$router.push('/Edit');*/
         console.log(index)
          this.editDialog=false;
        },

        deleteRow(index, rows) {
          rows.splice(index, 1);
        },
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            this.$refs.multipleTable.clearSelection();
          }
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        }
      }
    }
    
</script>

